<template>
  <div id="app">
    <el-row>
      <el-col :span="24">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>用户列表</span>
              <el-button type="primary" @click="handleAddTraveller">添加用户</el-button>
            </div>
          </template>
          <el-table :data="travellers" border style="width: 100%">
            <el-table-column prop="idCard" label="证件号">
            </el-table-column>
            <el-table-column prop="idCardType" label="证件类型">
            </el-table-column>
            <el-table-column prop="name" label="姓名">
            </el-table-column>
            <el-table-column prop="gender" label="性别">
            </el-table-column>
            <el-table-column prop="username" label="用户名">
            </el-table-column>
            <el-table-column prop="phone" label="手机号">
            </el-table-column>
            <el-table-column prop="password" label="密码">
            </el-table-column>
            <el-table-column prop="status" label="状态">
            </el-table-column>
            <el-table-column label="操作" width="180">
              <template #default="scope">
                <el-button type="primary" size="small" @click="handleEditTraveller(scope.row)">编辑</el-button>
<!--                <el-button type="danger" size="small" @click="handleDeleteTraveller(scope.row)">删除</el-button>-->
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>

    <el-dialog v-model="addDialogVisible" title="添加用户" width="30%">
      <el-form :model="form" label-width="80px">
        <el-form-item label="证件号">
          <el-input  v-model="form.idCard" />
        </el-form-item>
        <el-form-item label="证件类型">
          <el-select v-model="form.idCardType" placeholder="请选择证件类型">
            <el-option
                v-for="item in idCardTypes"
                :key="item.id"
                :label="item.name"
                :value="item.name"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input  v-model="form.name" />
        </el-form-item>
        <el-form-item label="用户名">
          <el-input  v-model="form.username" />
        </el-form-item>
        <el-radio-group class="chose-item" v-model="form.gender">
          <el-radio label="男">先生</el-radio>
          <el-radio label="女">女士</el-radio>
        </el-radio-group>
        <el-form-item label="手机号">
          <el-input  v-model="form.phone" />
        </el-form-item>
        <el-form-item label="密码">
          <el-input  v-model="form.password" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="addDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSaveTraveller">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog v-model="editDialogVisible" title="编辑用户" width="30%">
      <el-form :model="form" label-width="80px">
        <el-form-item label="证件号">
          <el-input  v-model="form.idCard" />
        </el-form-item>
        <el-form-item label="证件类型">
          <el-select v-model="form.idCardType" placeholder="请选择证件类型">
            <el-option
                v-for="item in idCardTypes"
                :key="item.id"
                :label="item.name"
                :value="item.name"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input  v-model="form.name" />
        </el-form-item>
        <el-form-item label="用户名">
          <el-input  v-model="form.username" />
        </el-form-item>
        <el-form-item label="性别">
        <el-radio-group  v-model="form.gender">
          <el-radio label="男">先生</el-radio>
          <el-radio label="女">女士</el-radio>
        </el-radio-group>
        </el-form-item>
        <el-form-item label="状态">
          <el-radio-group  v-model="form.status">
            <el-radio label="正常">正常</el-radio>
            <el-radio label="限制出行">限制出行</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input  v-model="form.phone" />
        </el-form-item>
        <el-form-item label="密码">
          <el-input  v-model="form.password" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSaveTraveller">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import axios from 'axios';
import { ElMessage } from 'element-plus';

export default {
  name: 'AdminTraveller',
  data() {
    return {
      idCardTypes: [],
      travellers: [],
      addDialogVisible: false,
      editDialogVisible: false,
      form: {
        name: "",
        username: "",
        idCardType: "",
        idCard: "",
        gender: "",
        phone: "",
        status: "",
        password: "",
      },
      };
    },
      mounted() {
        this.fetchIdCardTypes();
        this.fetchTravellers();
      },
      methods: {
        fetchIdCardTypes() {
          axios.get('/idCardType')
              .then(response => {
                this.idCardTypes = response.data;
              })
              .catch(error => {
                console.error('获取身份证类型失败', error);
                this.$message.error('获取身份证类型失败，请稍后再试');
              });
        },
        fetchTravellers() {
          axios.get('/travellers')
              .then(response => {
                this.travellers = response.data;
              })
              .catch(error => {
                console.error('获取旅客信息失败', error);
                this.$message.error('获取旅客信息失败，请稍后再试');
              });
        },
        handleAddTraveller() {
          this.addDialogVisible = true;
          this.form = {
            name: "",
            username: "",
            idCardType: "",
            idCard: "",
            gender: "",
            phone: "",
            status: "",
            password: "",
          };
        },
        handleSaveTraveller() {
          const traveller = this.form;
          console.log('保存用户', traveller);
          axios.post('/travellers', traveller)
              .then(() => {
                this.addDialogVisible = false;
                this.editDialogVisible = false;
                this.fetchTravellers();
                ElMessage.success('添加旅客信息成功');
              })
              .catch(error => {
                console.error('添加城市失败', error);
                ElMessage.error('添加旅客信息失败');
              });
        },
        handleEditTraveller(traveller) {
          this.editDialogVisible = true;
          this.form.idCard = traveller.idCard;
          this.form.name = traveller.name;
          this.form.username = traveller.username;
          this.form.idCardType = traveller.idCardType;
          this.form.gender = traveller.gender;
          this.form.phone = traveller.phone;
          this.form.status = traveller.status;
          this.form.password = traveller.password;
          console.log('编辑用户', traveller);
        },
        // handleDeleteCity(traveller) {
        //   // TODO: 实现删除旅客功能
        //   console.log('删除旅客', traveller);
        // },
      },
  };
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.box-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
